<template>
  <div id="app">
    <main>
      <section>
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" height="300px" class="carousel">
          <el-carousel-item v-for="(image, index) in images" :key="index">
            <img :src="image" alt="轮播图片" class="carousel-image">
          </el-carousel-item>
        </el-carousel>
        <!-- 视频学习内容 -->
        <section class="content-section">
          <h2>视频学习</h2>
          <ul class="card-list">
            <li class="card" v-for="(course, index) in videoCourses" :key="index">
              <router-link :to="{ name: 'subjectVideo', params: { id: course.id } }">
                <img class="card-img" :src="course.categoryImg" alt="课程封面">
                <p class="card-title">{{ course.categoryName }}</p>
              </router-link>
            </li>
          </ul>
        </section>
        <section class="content-section">
          <h2>高赞帖子</h2>
          <div>
            <ul>
              <li v-for="(post, index) in highRankPosts" :key="index" class="high-rank-item">
                <h3 class="ellipsis xw-enlarge"
                    @click="toDetailthumb(post)"
                    style="cursor: pointer; color: rgba(0,0,0,0.93); font-weight: bold;">
                  {{ post.title }}
                </h3>
              </li>
            </ul>
          </div>
        </section>
        <section class="content-section">
          <h2>最新赛事</h2>
          <div v-for="(competition, index) in latestCompetitions" :key="index" class="competition-item">
            <h3 class="competition-title">{{ competition.title }}</h3>
            <p class="competition-date">{{ formatDate(competition.createTime) }}</p>
            <a
                href="javascript:void(0)"
                class="competition-link"
                @click="openCompetitionInNewWindow(competition.id)"
            >
              阅读更多
            </a>
          </div>
        </section>
      </section>
    </main>
  </div>
</template>


<script>
import { Message } from "element-ui";

export default {
  data() {
    return {
      highRankPosts: [], // 高赞帖子的列表
      currentSlide: 0,
      images: [
        "https://th.bing.com/th/id/R.1ee66f2404f9c630385c5074c89d98f8?rik=Wh8GGcRmOHqtzg&riu=http%3a%2f%2fcdn.tmooc.cn%2fbsfile%2fcourseImg%2f76FF4FBDD8F24DB1814A439D490C1712.png&ehk=pKOl%2bWX1wHnDD3S4no%2bY6KAtDh3nviv1bgDatZarJrQ%3d&risl=&pid=ImgRaw&r=0",
        "https://bpic.588ku.com/templet_pic/21/08/17/f7d4601a643d4f70ee836886058cbd31.jpg!/fw/750/quality/90/unsharp/true/compress/true",
        "https://bpic.588ku.com/templet_pic/21/08/17/26765ff028bdbc6de1cba6b0f1ff791b.jpg!/fw/750/quality/90/unsharp/true/compress/true"
      ],
      videoCourses: ["Java 基础入门", "Web 开发实战", "算法与数据结构", "数据库设计与优化"],
      latestCompetitions: [] // 用于存放最新三条赛事通知数据
    };

  },
  mounted() {
    setInterval(this.nextSlide, 3000);// 自动轮播，每 3 秒切换
    this.getVideoCourses()
    this.loadCompetitions()
    this.loadHighRankPosts()
  },
  methods: {
    // 获取视频学习分类
    getVideoCourses() {
      this.request.get('/subjectCategory/getNewSubjectCategory').then(res => {
        if (res.code === '200') {
          this.videoCourses = res.data;
        } else {
          Message.error("获取视频学习分类失败");
        }
      }).catch(() => {
        Message.error("获取视频学习分类失败");
      });
    },
    loadCompetitions() {
      this.request.get("/news/latest").then(res => {
        if (res.code === "200") {
          this.latestCompetitions = res.data;
        } else {
          console.error("Failed to load data:", res.msg);
        }
      }).catch(error => {
        console.error("Error fetching data:", error);
      });
    },
    loadHighRankPosts() {
      this.request.get("/thumbs/highRankPosts").then(res => {
        if (res.code === '200') {
          this.highRankPosts = res.data.slice(0, 5);
        }
      });
    },
    toDetailthumb(post) {
       this.$router.push({ name: 'PostCodeDetail', params: { id: post.linkId } });

    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.images.length;
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    openCompetitionInNewWindow(competitionId) {
      this.$router.push({name: "NewsDetail", params: {id: competitionId}});

    }
  }
};
</script>




<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Arial', 'Helvetica', sans-serif;
  background-color: #f3f6fa;
  color: #333;
  overflow-y: auto;
}

/* 页面容器样式 */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 主要内容样式 */
main {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

/* 轮播图样式 */
.carousel {
  width: 80%; /* 调整轮播图宽度为页面宽度的 80% */
  max-width: 1000px; /* 设置最大宽度，避免在大屏上太宽 */
  margin: 20px auto; /* 居中显示 */
}

.carousel-image {
  width: 100%; /* 图片宽度自动适应容器 */
  height: 100%; /* 图片高度自动适应容器 */
  object-fit: cover; /* 确保图片内容按比例填充 */
}


/* 内容区样式 */
.content-section {
  margin: 30px 0;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content-section h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #007bff;
  text-align: center;
}

/* 卡片样式 */
.card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  width: 220px;
  text-align: center;
}

.card:hover {
  transform: scale(1.05);
}

.card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.card-title {
  padding: 10px;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #0056b3;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .carousel {
    width: 90%;
  }

  .card-list {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 80%;
    margin-bottom: 20px;
  }

  .carousel button {
    font-size: 1.2rem;
    padding: 8px;
  }
}

</style>